<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery操作DOM</title>
		<script src="js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<button>按钮</button>
		<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus natus beatae reprehenderit, tempora enim atque sit dolorem rerum repellendus suscipit, quas quisquam dolorum esse illo incidunt possimus a molestiae error!</p>
	    <div style="width: 100px; height: 100px; background: #000;"></div>
		
		<input type="button" value="按钮2">
		<input type="text"/>
		<script>
			
			/*
			javaScript:基础语法+*DOM(页面)+BOM(浏览器)
			JQuery操作DOM方式(7方式，36个函数】--改变页面效果
			1.元素内容操作:操作元素和元素内容的方式 【3个函数】
			.htmL()
			.val()
			.text()
			2.元素属性操作:操作元素的属性【固定属性、附加属性】【4个函数】
			.attr()
			.removeAttr()
			.prop()
			.removeProp()
			3.元素类名操作:(4个函数】
			addClass()
			removeClass()
			toggleClass()
			hasClass()
			4.元素样式【位置】操作:【5个函数】
			5.元素删除和插入操作:【7个函数】
			6.元素遍历操作:【6个函数】
			7.动画操作:【个函数】
			*/
			$("input[type='button']").click(function(){
				$("input[type='[text]'").val("文本框输出效果");
			});
			
			$("div").mouseenter(function(){
				$("span").html("<a href='#'>超文本</a>");
			});
			
			
			/*JQuery操作DOM：通过点击一个元素绑定一个事件给另外一个元素改变效果
			.html()函数 :增加一个元素，覆盖原来的html
			.val()函数：input元素使用，修改表单元素中文本*/
			
			
			
			/*$('button').click(function(){
			// DOM操作---改变页面其他元素
			// DOM操作--改变p元素改成marquee元素
			$('p').html("<marquee>跑马灯......</marquee>");
			});*/
			
			/*
			练习：100*100 框，div 鼠标移动上去，文本改成 超文本
			      按钮和输入框，点击按钮，输入框输出文字效果*/
		</script>
	</body>
</html>